<template>
  <div class="login">
    <el-form
      class="login-container"
      :model="dataForm"
      :rules="rules"
      ref="form"
      label-width="64px"
    >
      <h1 class="title">文件预览</h1>

      <el-form-item prop="password" label="密码：">
        <el-input
          type="text"
          v-model="dataForm.password"
          placeholder="请输入"
          autocomplete="off"
          maxlength="6"
          show-word-limit
        ></el-input>
      </el-form-item>

      <div style="text-align: center; padding-top: 30px">
        <el-button
          type="primary"
          style="width: 40%; text-align: center"
          @click="doSubmit()"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { getShareEntityById } from "@/api/extend/document";
import request from "@/utils/request";
import jsbos from "@/utils/jsbos";
import { isEmpty } from "@/utils/isEmpty";
export default {
  name: "Login",
  data() {
    return {
      data: "",
      dataForm: {
        password: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getShareEntityById();
  },
  //页面跳转
  methods: {
    getShareEntityById() {
      let url = window.location.href;
      let first = url.indexOf("=");
      let last = url.indexOf("&");
      if (url.indexOf("&") > -1) {
        url = url.substring(first + 1, last);
      } else {
        url = url.substring(first + 1);
      }
      getShareEntityById(url).then((res) => {
        this.data = res.data;
        if (
          (isEmpty(res.data.endTime) && res.data.shareType == "1") ||
          (isEmpty(res.data.endTime) &&
            res.data.shareType == "2" &&
            res.data.password == "1")
        ) {
          window.location.replace(res.data.shortLink);
        } else if (
          isEmpty(res.data.endTime) &&
          res.data.shareType == "2" &&
          res.data.password !== "1"
        ) {
          this.$message.warning("请输入提取口令！");
        } else if (new Date().getTime() > Number(res.data.endTime)) {
          this.$message.warning("当前链接已过期！");
        } else if (
          res.data.shareType == "1" ||
          (res.data.shareType == "2" && res.data.password == "1")
        ) {
          window.location.replace(res.data.shortLink);
        } else {
          this.$message.success("请输入提取口令！");
        }
      });
    },
    doSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // if(isEmpty(this.data.endTime))
          if (
            !isEmpty(this.data.endTime) &&
            new Date().getTime() > Number(this.data.endTime)
          ) {
            this.$message.warning("当前链接已过期！");
          } else if (this.dataForm.password == this.data.password) {
            window.location.replace(this.data.shortLink);
          } else {
            this.$message.warning("密码错误，请重新输入！");
          }
        } else {
          this.$message.warning("请输入密码！");
          return;
        }
      });
    },
  },
};
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 50%;

  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 250px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
